<template>
  <div class="container">
    <div class="count">
      <el-form ref="searchForm" :inline="true" :model="search">
        <el-form-item label="账户" prop="name">
          <el-input
            v-model="search.name"
            placeholder="请输入用户账户"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="search.email" placeholder="请输入账户邮箱" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="search.role">
            <el-option value="admin" label="管理员" />
            <el-option value="visitor" label="访客" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="search.status">
            <el-option value="locked" label="锁定" />
            <el-option value="active" label="可用" />
          </el-select>
        </el-form-item>
        <el-form-item class="operate">
          <el-button
            type="primary"
            @click="submitForm"
          >搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div style="background: #fff; padding: 24px 12px">
        <div class="topoper">
          <div>
            <p v-show="showAction">
              <el-button @click="enable('启用')">启用</el-button>
              <el-button @click="enable('禁用')">禁用</el-button>
              <el-button @click="enable('结束授权')">结束授权</el-button>
              <el-button @click="enable('授权')">授权</el-button>
            </p>
          </div>
          <p>
            <span
              role="img"
              aria-label="reload"
              tabindex="-1"
              class="anticon anticon-reload"
              style="margin-left: 12px"
            ><svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="reload"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
              /></svg></span>
          </p>
        </div>
        <div>
          <el-table
            v-loading="loading"
            :data="userList"
            border-bottom
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column
              prop="name"
              label="账户"
              width="120"
            />
            <el-table-column prop="email" label="邮箱" width="200" />
            <el-table-column label="角色" width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.role === "admin" ? "管理员" : "访客" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.status === "locked" ? "已锁定" : "可用" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createAt"
              :formatter="setDate"
              label="注册日期"
              width="240"
            />
            <el-table-column label="操作" width="160">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="changestatus(scope.row)"
                >{{ scope.row.status==='locked'? '启用' : '禁用' }}</el-button>
                <el-button
                  type="text"
                  @click="changerole(scope.row)"
                >{{ scope.row.role==='admin'? '解除授权' : '授权' }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paging">
          <el-pagination
            :current-page="1"
            :page-sizes="[12, 20, 30]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <footer>
      <ul class="_24OUzUa2SjssS1_EshUigc">
        <li>
          <a
            class="_283jLEQ1DhWAe2fw-CeVAf"
            href="https://github.com/fantasticit/wipi"
            target="_blank"
            rel="noreferrer"
          ><span
            role="img"
            aria-label="github"
            class="anticon anticon-github"
          ><svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="github"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
            /></svg></span></a>
        </li>
      </ul>
      <div class="_2nq88U0e2iY4tDIjMmuVWA">
        <p>
          Copyright
          <span
            role="img"
            aria-label="copyright"
            class="anticon anticon-copyright"
          ><svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="copyright"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm5.6-532.7c53 0 89 33.8 93 83.4.3 4.2 3.8 7.4 8 7.4h56.7c2.6 0 4.7-2.1 4.7-4.7 0-86.7-68.4-147.4-162.7-147.4C407.4 290 344 364.2 344 486.8v52.3C344 660.8 407.4 734 517.3 734c94 0 162.7-58.8 162.7-141.4 0-2.6-2.1-4.7-4.7-4.7h-56.8c-4.2 0-7.6 3.2-8 7.3-4.2 46.1-40.1 77.8-93 77.8-65.3 0-102.1-47.9-102.1-133.6v-52.6c.1-87 37-135.5 102.2-135.5z"
            /></svg></span>
          <!-- -->2021<!-- -->
          Designed by<a
            href="https://github.com/fantasticit/wipi"
            target="_blank"
            rel="noreferrer"
          >
            <!-- -->Fantasticit.</a>
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      search: {
        name: '',
        email: '',
        status: '',
        role: ''
      },
      page: 1,
      pageSize: 12,
      loading: false,
      showAction: false,
      list: []
    }
  },
  computed: {
    ...mapState({
      userCount: (state) => state.userstore.userCount,
      userList: (state) => state.userstore.userList
    })
  },
  created() {
    this.submitForm()
  },
  methods: {
    ...mapActions({
      getUserPage: 'userstore/getUserPage',
      Disable: 'userstore/Disable'
    }),
    async submitForm() {
      this.loading = true
      const options = {}
      for (const key in this.search) {
        this.search[key] && (options[key] = this.search[key])
      }
      await this.getUserPage({ page: this.page, ...options })
      this.loading = false
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    async handleSizeChange(val) {
      this.pageSize = val
      const options = {}
      await this.getUserPage({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
      console.log(`每页 ${val} 条`)
    },
    async handleCurrentChange(val) {
      this.page = val
      const options = {}
      await this.getUserPage({
        page: this.page,
        pageSize: this.pageSize,
        ...options
      })
      console.log(`当前页: ${val}`)
    },
    handleSelectionChange(selection) {
      this.showAction = !!selection.length
      this.list = selection
      console.log(this.list, 'arguments...', arguments)
    },
    setDate(row, column) {
      const newdate = row[column.property]
      if (newdate === undefined) return
      return moment(newdate).format('YYYY-MM-DD HH:mm:ss')
    },
    changestatus(obj) {
      console.log(obj)
      obj.status = obj.status === 'active' ? 'locked' : 'active'
      this.Disable(obj)
    },
    changerole(obj) {
      obj.role = obj.role === 'admin' ? 'visitor' : 'admin'
      this.Disable(obj)
    },
    enable(str) {
      if (str === '启用' || str === '禁用') {
        this.list.forEach(item => {
          item.status = item.status === 'active' ? 'locked' : 'active'
          this.Disable(item)
        })
      } else {
        this.list.forEach(item => {
          item.role = item.role === 'admin' ? 'visitor' : 'admin'
          this.Disable(item)
        })
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
    width: 100%;
    height: 100%;
    background: rgb(241, 241, 241);
    flex: 1;
    padding: 24px;
    overflow: auto;
}
.count {
    box-sizing: border-box;
}
form {
    background: #fff;
    padding: 20px 12px;
    margin-bottom: 16px;
}
.operate {
    margin-left: 70%;
}
.paging {
    margin-top: 20px;
}
.el-pagination {
    text-align: right;
}
footer{
    padding: 20px 0;
    color: rgba(0,0,0,.65);
    text-align: center;
    ul{
      display: inline-flex;
      list-style: none;
      font-size: 24px;
      margin: 8px 0 6px;
      margin-right: 24px;
    }
    ._2nq88U0e2iY4tDIjMmuVWA {
        font-size: 10px;
        line-height: 15px;
    }
}
.topoper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
</style>
